<template>
    <div class="system-user-dialog-container">
        <el-dialog ref="userDialogFormRef" :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px"
            :before-close="closeDialog">
            <el-form :model="state.content" ref="formRef" :rules="formRules" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="code" label="部门编号">
                            <el-input v-model="state.content.code" :disabled="state.dialog.type === 2" placeholder="请输入账户名称"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="name" label="部门名称">
                            <el-input v-model="state.content.name" placeholder="请输入部门名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="上级部门编号">
                            <el-input v-model="state.content.parentCode" placeholder="请输入" disabled clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="上级部门名称">
                            <el-input v-model="state.content.parentName" placeholder="请输入" disabled clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="success" @click="onContinuneSubmit" v-show="state.dialog.type !== 2" size="default">{{
                        t('message.btnName.continueSubmit')
                    }}</el-button>
                    <el-button @click="onSubmit" type="primary" size="default">{{ t('message.btnName.submit') }}</el-button>
                    <el-button @click="onCancel" size="info">{{ t('message.btnName.cancel') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { inject, onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { usePersonOrgCreateApi, usePersonOrgUpdateApi } from '/@/api/person/org';

// 定义变量内容
const userDialogFormRef = ref();
const formRef = ref();
// 定义子组件向父组件传值/事件
const { t } = useI18n();
// const emit = defineEmits(['refresh']);

// 接收父组件传递的方法
const getTreeMenus: any = inject('getTreeMenus')


const useContent = () => {
    return {
        code: '', // 账户名称
        name: '', // 用户姓名
        parentCode: '',
        parentName: '',
    }
}
const state = reactive({
    content: {} as any,
    dialog: {
        isShowDialog: false,
        type: 0,
        title: '',
        index: 1
    },
    disabled: false
});

// 表单校验
const formRules = ref({
    code: [
        { required: true, message: '必填项不能为空', trigger: 'blur' },
        { min: 1, max: 40, message: '编号必须1-40位字母数字组合而成', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9]+$/, message: '编号必须由数字或字母组成', trigger: 'blur' },
    ],
    name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
})

// 打开弹窗
const openDialog = (row?: any, parentRow?: any) => {
    if (!row) {
        state.dialog.title = '新增一级部门'
        state.dialog.type = 0
    } else if (parentRow) {
        state.dialog.title = `新增[${parentRow.code}${parentRow.name}]下级部门`
        state.dialog.type = 1
        state.content.code = `${parentRow.code}${state.dialog.index}`
        state.content.parentCode = parentRow.code
        state.content.parentName = parentRow.name
    } else {
        state.dialog.title = '修改部门名称'
        state.dialog.type = 2
        state.content.code = row.code
        state.content.name = row.name
    }
    state.disabled = true
    // getTreeData()
    state.dialog.isShowDialog = true;

};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    state.content = useContent()
    getTreeMenus()
};
// 取消
const onCancel = () => {
    closeDialog();
};

// 封装提交函数
const submit = (option: number) => {

        if (state.dialog.type === 2) {
            usePersonOrgUpdateApi(state.content).then(({ msg }) => {
                ElMessage.success({
                    message: msg,
                    duration: 500,
                    onClose: () => {
                        state.content = useContent()
                    }
                })
            })
        } else {
            usePersonOrgCreateApi(state.content).then(({ msg }) => {
                console.log('111')
                ElMessage.success({
                    message: msg,
                    duration: 500,
                    onClose: () => {
                        console.log('222')
                        state.content.name = ''
                        if (option === 0) {
                            console.log('333')
                            state.dialog.index++
                            // state.content.code = `${state.content.parentCode}-${state.dialog.index}`
                            state.content.code = `${state.content.parentCode ? `${state.content.parentCode}` : ''}${state.dialog.index}`
                        }
                    }
                })
            }).catch(() => {
                state.content.name = ''
                if (option === 0) {
                    state.dialog.index++
                    // state.content.code = `${state.content.parentCode}-${state.dialog.index}`
                    state.content.code = `${state.content.parentCode ? `${state.content.parentCode}` : ''}${state.dialog.index}`
                }
            })
        }

}



// 提交并继续
const onContinuneSubmit = () => {
    submit(0);
    setTimeout(() => {
        // 页面刷新数据
        getTreeMenus()
    }, 200);
};
// 提交
const onSubmit = () => {
    console.log('保存')
    submit(1);
    closeDialog();
    setTimeout(() => {
        // 页面刷新数据
        getTreeMenus()
    }, 200);
};
onMounted(() => {
})
// 暴露变量
defineExpose({
    openDialog,
});
</script>
